<!--
 * @Author: 沈言卿 13379879+shen-yanqing@user.noreply.gitee.com
 * @Date: 2024-03-03 22:01:39
 * @LastEditors: 沈言卿 13379879+shen-yanqing@user.noreply.gitee.com
 * @LastEditTime: 2024-03-04 23:30:16
 * @FilePath: \ipcamera\src\components\VideoPart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<style scoped>
.VideoPart {
  height: 650px;
  overflow: hidden;
}
Video {
  float: left;
  margin: 5px;
  width: 57%;
  height: 640px;
}
.releOperation {
  float: left;
  margin-top: 5px;
  padding: 5px;
  width: 41%;
  height: 630px;
  border: 1px solid black;
  overflow: hidden;
}
.operationLeft{
  width: 100%;
  height: 32px;
  overflow: hidden;
}
.operationLeft ul {
  display: flex;
  list-style: none;
  justify-content: space-between;
}
.operationLeft li {
  float: left;
  width: 31%;
  height: 30px;
  background-color: #003399;
  border: 1px solid black;
  color: #66CCFF;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.operationLeft li:hover {
  background-color: #fff;
  color: #003399;
}
.operationRight {
  display: flex;
  margin-top: 5px;
  width: 100%;
  height: 590px;
  border: 1px solid black;
  align-items: center;
  overflow: hidden;
}
</style>

<template>
    <div class="VideoPart">
        <div class="VideoShow">
            <Video id='videoCamera' ref="videoElement" autoplay controls></Video>
            <div class="releOperation">
              <!-- 操作按钮 -->
              <div class="operationLeft">
                <ul>
                  <li @click="openCamera">打开摄像头</li>
                  <li @click="closeCamera">关闭摄像头</li>
                  <li @click="openPhoto" v-show="!imgSrc">拍照预览</li>
                  <li @click="closePhoto" v-show="imgSrc">关闭拍照</li>
                </ul>
              </div>
              <!-- 渲染列表 -->
              <div class="operationRight">
                <canvas id="canvas" ref="canvas" style="display: none;"></canvas>
                <div v-if="imgSrc" class="imgCamera">
                  <img :src="imgSrc" class="imgShow" />
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data () {
    return {
      imgSrc: '' // 存储页面中的画布元素
    }
  },
  // 页面已加载触发方法
  mounted () {
    this.startVideo()
  },
  methods: {
    // 页面加载默认渲染
    async startVideo () {
      try {
        const videoElement = this.$refs.videoElement
        const stream = await navigator.mediaDevices.getUserMedia({ video: true })
        videoElement.srcObject = stream
      } catch (error) {
        console.log(error)
      }
    },
    // 打开摄像头功能
    openCamera () {
      this.startVideo()
    },
    // 关闭摄像头功能
    closeCamera () {
      this.$refs.videoElement.srcObject.getTracks()[0].stop()
    },
    // 拍照
    openPhoto () {
      const videoElement = this.$refs.videoElement
      const canvas = this.$refs.canvas
      canvas.width = videoElement.videoWidth
      canvas.height = videoElement.videoHeight
      canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height)
      const img = canvas.toDataURL('image/png')
      this.imgSrc = img
    },
    closePhoto () {
      this.imgSrc = ''
    }
  }
})
</script>
